<template>
  <div>
    <div class="ibox-content no-border">
      产品方Api配置
    </div>
    <div class="ibox-content">
      <el-button @click="goBack" size="small" type="primary" plain icon="el-icon-back">返回列表</el-button>
    </div>
    <div class="ibox-content">
      <el-form :model="filterForm" :rules="filterRules" ref="filterForm" label-position="top" :inline="true"
               size="small">
        <el-form-item label="产品" prop="app_name" style="width: 200px">
          <el-input :disabled="true" v-model="filterForm.app_name"></el-input>
        </el-form-item>
        <el-form-item label="  ">
          <el-button @click.native="addTagFormVisible=true" style="margin-top:15px;margin-left: 10px"
                     icon="el-icon-search"
                     type="primary">选择产品
          </el-button>
        </el-form-item>
        <div class="hr-line-dashed"></div>
        <br>
        <el-form-item>
          <el-button @click="startTest('filterForm')" type="primary">添加</el-button>
        </el-form-item>
      </el-form>
      <el-input v-model="resultInfo" type="textarea" readonly="readonly"
                :autosize="{ minRows: 8, maxRows: 4}"></el-input>
    </div>


    <!--  选择产品  -->
    <el-dialog width="36%" title="选择产品" :visible.sync="addTagFormVisible" @close="closeDialog"
               :close-on-click-modal="false">
      <el-form :model="addTagForm" ref="addTagForm" size="small" @submit.native.prevent="searchProduct">
        <el-form-item>
          <el-input v-model="addTagForm.searchProductName" placeholder="输入要搜索的商品名称"></el-input>
        </el-form-item>
      </el-form>
      <el-table v-show="show_search_table"
                :data="searchResultList"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="app_name" label="产品名称"></el-table-column>
        <el-table-column prop="status_desc" align="center" label="产品状态" width="100"></el-table-column>
        <el-table-column width="100" align="center">
          <template slot-scope="scope">
            <el-button @click.native="chooseApp(scope.row)" size="mini" type="primary" plain icon="el-icon-check">选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeDialog" size="small">关闭</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {getProductList} from "../../api/product";
  import {addProductApi} from "../../api/admin";

  export default {
    name: "AddProductApiSetting",
    data() {
      return {
        filterForm: {
          app_id: '',
          app_name: ''
        },
        filterRules: {
          phone: [{required: true, message: '请输入测试手机号'}],
          app_name: [
            {required: true, message: '请选择产品'}
          ],

        },

        addTagFormVisible: false,
        addTagForm: {},
        searchResultList: [],
        show_search_table: false,
        resultInfo: ''
      }
    },
    methods: {
      startTest(form) {
        this.$refs[form].validate((valida => {
          if (valida) {

            addProductApi({
              ...this.filterForm
            }).then(res => {
              var Dom = [res.data.app_name];
              Dom.push('url: http://fapi.51empire.com/v2/user/……');
              Dom.push('mec_id: ' + res.data.mec_id);
              Dom.push('key: ' + res.data.key);
              this.resultInfo = Dom.join('\n');
              this.$message.success(res.msg)
            }).catch(error => {

            })
          }
        }))
      },
      TestResponse(res) {
        var Dom = [];
        Dom.push('【' + res.msg + '】');
        Dom.push('code: ' + res.code);
        Dom.push('request_time: ' + res.data.request_time);
        Dom.push('sign: ' + res.data.sign);
        switch (res.data.app_reg_status) {
          case 1:
            Dom.push('\n用户产品注册状态写入失败');
            break;

          case 2:
            Dom.push('\n用户产品注册状态写入成功');
            break;
        }

        this.resultInfo = this.resultInfo + '\n' + Dom.join('\n')
      },
      getProductListbuyName() {
        getProductList({
          name: this.addTagForm.searchProductName
        }).then(res => {
          this.searchResultList = res.data;
        }).catch(error => {

        })
      },
      searchProduct() {
        if (this.addTagForm.searchProductName) {
          this.show_search_table = true;
          this.getProductListbuyName()
        } else {
          this.$message.error('请输入要搜索的产品')
        }
      },
      chooseApp(row) {
        this.filterForm.app_id = row.id;
        this.filterForm.app_name = row.app_name;
        this.addTagForm.searchProductName = '';
        this.resultInfo = '';
        this.show_search_table = false;
        this.addTagFormVisible = false;
      },
      closeDialog() {
        this.addTagFormVisible = false;
        this.show_search_table = false;
        this.addTagForm.searchProductName = ''
      },
      goBack() {
        this.$router.push({name: 'ProductApiSetting'})
      }
    }
  }
</script>

<style scoped>

</style>
